<template>
	<view class="content">
		<!-- 头部 -->
		<view class="header"><text>商品详情</text></view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" class="scroll">
			<swiper-item v-for="(item,index) in imageList[0]" :key="index" class="scrollItem">
				
					<image :src="item" mode=""></image>
		
			</swiper-item>
		</swiper>
		<!-- 价格 -->
		<view>
			<view class="price">
					<view class="realPrice">
						<text>￥</text>
						<text class="real">{{newSkuList[0].maxPrice}}</text>
					</view>
					<view class="markPrice">
						<text>￥</text>
						<text>{{newSkuList[0].originPrice}}</text>
					</view>
			</view>
			<!-- 商品描述 -->
			<view class="desc">
				<text>{{newSkuList[0].productName}}</text>
			</view>
		</view>
		<view class="act">
			<view class="integral">
				<i>积分</i>
				<span>商品最高可获得999积分</span>
				<text>去花积分 > </text>
			</view>
			<view class="activity">
				<span>满N件减送</span>
				<i> {{newSkuList[0].promotionList[0].promotionName}}</i>
				<text> > </text>
			</view>
		</view>
		<!-- 底部 -->
		<view class="detailFooter">
			<view class="tab">
				<view @click="toHome()">
					<u-icon class="u-icon" name="home"  size="28" ></u-icon>
				</view>
				<view @click="toCart()">
					<u-icon class="u-icon" name="bag"  size="28"></u-icon>
				</view>
				<view>
					<u-icon class="u-icon" name="heart"  size="28"></u-icon>
				</view>
			</view>
			<view class="addCart">
				<view class="btn addShopCart" @click="tocart(id)">加入购物袋</view>
				<view class="btn buyNow">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	import {mapActions,mapState,mapGetters} from "vuex"
export default {
	data() {
		return {
			// detailData:[], //详情数据
			skuDetail:[],//详情数据
			id:'',
			imageList:[],
			newSkuList:[],
			newCart:[]
		};
	},
	computed:{
		...mapState({
			detailData:state=>state.detailDate.detailData,
			skuList:state=>state.detailDate.skuList
			
		}),
		...mapGetters(['newCartList','skuList'])
		// ...mapGetters([
			
		// ])
		
	},
	beforeMount(){
		this.getskudetail(),
		this.getSkuList(),
		this.getdetailData()
	},
	onLoad(options) {
		// console.log(options.id)
		this.id = options.id
	},
	onShow() {
		getApp().globalData.id = this.id
		console.log(getApp().globalData.id)
	},
	methods:{
		//跳转首页
		toHome(){
			wx.switchTab({
				url:'/pages/index/index'
			})
		},
		//跳转购物车
		toCart(){
			wx.switchTab({
				url:'/pages/cart/cart'
			})
		},
		//发送请求获取数据
		...mapActions(["getdetailData","getSkuList","getId"]),
		async getskudetail(){
			let result = await request('/getskuList')
			this.skuDetail = result.data
			this.skuDetail.filter(item =>{
				if(this.id === item.id){
					this.imageList.push(item.imageList)
					this.newSkuList.push(item)
				}
			})
		},
		tocart(){
			// let res = await request('/addcartList')
			// console.log(this.newCart);
			this.$store.dispatch('newCart',this.newSkuList)
			this.$store.dispatch('getId',this.id)
			console.log(this.newSkuList)
			// ...mapActions(["newCart"])
			// this.getId(this.id)
			// this.$store.gettters(pushCartList)
			// console.log(id)
			// console.log(this.id)
			wx.switchTab({
				url:'/pages/cart/cart'
			})
			// console.log(id)
		}
	}
};
</script>

<style lang="stylus">
.content
	background-color #eee
	.header
		text-align center
		padding 10upx 0
		text
			font-size 28upx
	.scroll
		width 100%
		height 640upx
		margin 10upx 0
		.scrollItem
			width 100%
			height 100%
			image
				width 100%
				height 100%
	.price
		display flex
		flex 1
		margin 0 10upx
		background-color #ffffff
		text
			vertical-align middle
		.realPrice
			color red
			.real
				font-size 60upx
		.markPrice
			text-decoration: line-through
			color #C0C0C0
			line-height 90upx
			margin-left 20upx
	.desc
		padding 0 20upx
		background-color #ffffff
	.act
		width 100%
		height 200upx
		margin 40upx 0
		.integral
			padding 20upx 
			background-color #ffffff
			color #000000
			display flex
			flex 1
			// margin 0 20upx
			i
				color #B12429
				font-weight 700
			span
				margin-left 10upx
				font-size 26upx
				line-height 50upx
			text
				color #666666
				font-size 26upx
				margin-left 180upx
				line-height 50upx
		.activity
			background-color #ffffff
			color #000000
			display flex
			flex 1
			// margin 0 20upx
			padding 20upx 
			span
				background-color #B12429
				color #FFFFFF
			i
				margin-left 10upx
				font-size 26upx
				line-height 50upx
			text
				color #666666
				font-size 26upx
				margin-left 64upx
				line-height 50upx
	.detailFooter
		position fixed
		bottom 0
		left 0
		height 100upx
		line-height 100upx
		border-top 1upx solid #EEEEEE
		display flex
		background #fff
		.tab
			display flex
			width 30%
			height 60upx
			line-height 180upx
			padding 20upx 10upx
			.u-icon
				margin 0 10upx
		.addCart
			width 70%
		.btn
			display inline-block
			width 242upx
			height 100%
			text-align center
			font-size 28upx
			color #fff
			&.buyNow
				// border-left 1upx solid #eee
				background #B81C28
			&.addShopCart
				margin-left 20upx
				background #C7837E
</style>
